<template>
  <div class="toolbar-left">
    <div
      :class="['item', { active: toolbar.active }]"
      v-for="toolbar in toolbarList"
      :key="toolbar.id"
      @click="operation(toolbar)"
    >
      <div class="img-box" :title="toolbar.title || ''">
        <span class="icon-text">{{ toolbar.text }}</span>
        <img
          class="icon-img"
          :src="require(`@/assets/home/left/toolbar/${toolbar.icon}.png`)"
        />
      </div>
      <div class="content" v-if="toolbar.children">
        <div
          class="content-item"
          v-for="child in toolbar.children"
          :key="child.id"
          @click.stop="operation(child, toolbar)"
          :title="child.title || ''"
          :class="activeChild.id === child.id ? 'active-child' : ''"
        >
          <span v-if="child.type === 'text'">{{ child.text }}</span>
          <img
            v-else
            :src="require(`@/assets/home/left/toolbar/${child.icon}.png`)"
          />
          <span v-if="child.type === 'icon'">{{ child.title }}</span>
        </div>
      </div>
      <div class="no-content" v-else></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({
  name: "toolbarLeft",
  components: {},
})
export default class toolbarLeft extends Vue {
  public visualAngle = 80;
  public toolbarList = [
    {
      id: "0",
      icon: "0",
      text: "",
      methods: "mainView",
      title: "主视图",
    },
    { id: "29", icon: "9", methods: "clickRealF11FullScreen", title: "全屏" },
    {
      id: "34",
      icon: "34",
      methods: "underMap",
      title: "地形底图",
      active: false,
    }, // 全屏
    {
      id: "32",
      icon: "32",
      methods: "quickMap",
      title: "快捷地图",
      active: false,
    },
    {
      id: "2",
      icon: "7",
      children: [
        {
          id: "3",
          type: "icon",
          icon: "7",
          title: "飞行",
          methods: "setInteractiveMode",
          data: "飞行",
        },
        {
          id: "10",
          type: "icon",
          icon: "8",
          title: "人行",
          methods: "setInteractiveMode",
          data: "人行",
        },
      ],
    },
    {
      id: "17",
      icon: "17",
      methods: "showTimeLine",
      title: "阴影模拟",
      active: false,
    }, // 全屏
    {
      id: "3",
      icon: "13",
      methods: "switchNight",
      title: "夜景",
      active: false,
    },
    { id: "6", icon: "38", methods: "clickFullScreen", title: "收缩面板" }, // 全屏

    {
      id: "5",
      icon: "5",
      children: [
        {
          id: "1",
          icon: "35",
          type: "icon",
          title: "清除图层",
          text: "清除图层",
          methods: "clearLayerNodes",
        },
        {
          id: "2",
          icon: "36",
          type: "icon",
          title: "清除对象",
          text: "清除对象",
          methods: "clearTempObjects",
        },
      ],
    },
    {
      id: "18",
      icon: "4",
      title: "水平视角",
      text: this.visualAngle,
      active: false,
      children: [
        {
          id: "16",
          icon: "16",
          methods: "changeVisualAngle",
          title: "放大",
          data: "magnify",
        },
        {
          id: "15",
          icon: "15",
          methods: "changeVisualAngle",
          title: "缩小",
          data: "shrink",
        },
      ],
    },
  ];
  private activeToolbar = null;

  private activeChild: any = "";

  get activeProject() {
    return true;
  }
  get timeLine() {
    return true;
  }

  get activeModel() {
    return true;
  }
  get activeMeetingwithPlan() {
    return true;
  }
  get panelList() {
    return true;
  }

  get activePanel() {
    return true;
  }

  get activeMenu() {
    return true;
  }

  get hidePanel() {
    return true;
  }

  get realFullScreen() {
    return this.activeMenu || !this.hidePanel;
  }

  get activeMeeting() {
    return true;
  }

  get showLegend() {
    return true;
  }

  @Watch("timeLine", { deep: true })
  onTimeLineChange(val: any) {
    if (!val) {
      this.changeToolActive(this.toolbarList, "阴影模拟");

      // if (this.toolbarList){
      //   const getButtonStauts = this.changeToolActive(this.toolbarList, '阴影模拟');
      // }
    }
  }

  @Watch("realFullScreen")
  onRealFullScreenChange() {
    let fullScreen = this.toolbarList.find((val) => val.id === "6");
    if (fullScreen) {
      fullScreen.icon = this.realFullScreen ? "38" : "37";
    }
  }

  @Watch("activePanel")
  onActivePanelChange(val: any) {
    if (val?.type !== "model") {
      this.toolbarList[1].active = false;
      this.toolbarList[1].text = "";
      return;
    }

    let model = (this.toolbarList[1].children as any).find(
      (value: any) => value.id === val.panelId
    );
    if (model && model.id) {
      //   HomeModule.setActiveModel(model.id);
      this.toolbarList[1].active = true;
      this.toolbarList[1].text = val.text.substr(0, 2);
    }
  }

  underMap() {
    // HomeModule.setQuickPanel("underMap");
  }
  quickMap() {
    // HomeModule.setQuickPanel("quickMap");
  }

  operation(item: any, toolbar?: any) {
    if (item.methods) {
      (this as any)[item.methods](item);
    }
    if (toolbar && item.type === "icon") {
      toolbar.icon = item.icon;
    }
  }
  showLegendClick(item: any) {
    const flag = !this.showLegend;
    item.active = flag;
    // HomeModule.setShowLegend(flag);
  }

  async polygonClip() {}

  async showTimeLine() {
    if (!this.timeLine) {
      this.changeToolActive(this.toolbarList, "阴影模拟");
      const data = {
        startTime: 9,
      };
      //   HomeModule.setTimeLine(data);
    } else {
      //   await BoomEngineAPI.instance.weather?.setDateTime(
      //     2021,
      //     9,
      //     29,
      //     9,
      //     0,
      //     0,
      //     false
      //   );
      //   HomeModule.setTimeLine(null);
    }
  }

  showSkyLine() {
    // const res = this.getLayerpath();
    // if (res) {
    //   const getButtonStauts = this.changeToolActive(this.toolbarList, "天际线");
    //   // LayerTree.instance.setCheckedByPath(res + '/天际线', getButtonStauts);
    // }
  }

  //   getLayerpath() {
  //     if (this.activeProject && this.activeMeetingwithPlan) {
  //       let activeMeetingType: string;

  //       switch (this.activeMeeting) {
  //         case "ztsc":
  //           activeMeetingType = "专题审查";
  //           break;
  //         case "jnsc":
  //           activeMeetingType = "局内审查";
  //           break;
  //         case "zjsc":
  //           activeMeetingType = "专家审查";
  //           break;

  //         default:
  //           activeMeetingType = "";
  //           break;
  //       }
  //       return (
  //         this.activeProject.name +
  //         "/方案图层/" +
  //         activeMeetingType +
  //         this.activeMeetingwithPlan
  //       );
  //     } else this.$message("请先选择项目与方案！");
  //   }

  clickModel(model: any) {
    // HomeModule.setActiveProject(null);
    // HomeModule.setActiveDistrict(null);
    // HomeModule.setActiveCssj(null);
    // this.deleteProjectPanel();
    // HomeModule.setHighlightArea(null);
    // if (model.id === this.activeModel && this.activeModel) {
    //   HomeModule.deletePanel(this.activeModel);
    //   HomeModule.setActiveModel(null);
    //   this.activeChild = "";
    //   this.clearLayerNodes();
    //   return;
    // }
    // this.activeChild = model;
    // HomeModule.setActiveModel(model.id);
    // this.addPanel(model.data);
    // this.mainView();
    // if (model.id === "xzmx") {
    //   this.clickXZMX();
    // }
    // if (model.id === "cssj") {
    //   this.clickcssj();
    // }
    // if (model.id === "ghmx") {
    //   this.clickGHMX();
    // }
  }

  changeVisualAngle(type: any) {
    // if (type.data === "shrink" && this.visualAngle < 135) {
    //   this.visualAngle = this.visualAngle + 5;
    //   BoomEngineAPI.instance.settings?.setFovX(this.visualAngle);
    //   // BoomEngineAPI.instance.settingsPanel?.setCameraMode(1, this.visualAngle);
    // }
    // if (type.data === "magnify" && this.visualAngle > 45) {
    //   this.visualAngle = this.visualAngle - 5;
    //   BoomEngineAPI.instance.settings?.setFovX(this.visualAngle);
    //   // BoomEngineAPI.instance.settingsPanel?.setCameraMode(1, this.visualAngle);
    // }
    // this.changeToolTextById(this.toolbarList, "18");
  }

  clickXZMX() {
    // LayerTree.instance.setCheckedByPath('/基础数据', false);
    // LayerTree.instance.setCheckedByPath('/现状模型', true);
    // LayerTree.instance.setCheckedByPath('/城市设计', false);
    // LayerTree.instance.setCheckedByPath('/规划模型', false);
    // LayerTree.instance.setCheckedByPath('/管控数据', false);
    // LayerTree.instance.setCheckedByPath('/道路', false);
    // LayerTree.instance.setCheckedByPath('/基础数据/高程影像', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/行政区划', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/控规管理单元', true); 这里有问题 先注释
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/国道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/省道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/县道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/乡道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/村道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/高速公路', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/城市主干道', true);
  }

  clickcssj() {
    // LayerTree.instance.setCheckedByPath('/基础数据', false);
    // LayerTree.instance.setCheckedByPath('/现状模型', true);
    // LayerTree.instance.setCheckedByPath('/城市设计', false);
    // LayerTree.instance.setCheckedByPath('/规划模型', false);
    // LayerTree.instance.setCheckedByPath('/管控数据', false);
    // LayerTree.instance.setCheckedByPath('/道路', false);
    // LayerTree.instance.setCheckedByPath('/基础数据/高程影像', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/行政区划', true);
    // LayerTree.instance.setCheckedByPath('/城市设计/范围线', true);
    // LayerTree.instance.setCheckedByPath('/城市设计/范围线/控规单元范围面', false);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/国道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/省道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/县道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/乡道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/村道', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/高速公路', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/地名地址/城市主干道', true);
  }

  clickGHMX() {
    // LayerTree.instance.setCheckedByPath('/基础数据', false);
    // LayerTree.instance.setCheckedByPath('/现状模型', true);
    // LayerTree.instance.setCheckedByPath('/城市设计', false);
    // LayerTree.instance.setCheckedByPath('/规划模型', false);
    // LayerTree.instance.setCheckedByPath('/管控数据', false);
    // LayerTree.instance.setCheckedByPath('/道路', false);
    // LayerTree.instance.setCheckedByPath('/基础数据/行政区划', true);
    // LayerTree.instance.setCheckedByPath('/基础数据/高程影像', true);
    // LayerTree.instance.setCheckedByPath('/规划模型/范围线', true);
    // LayerTree.instance.setCheckedByPath('/规划模型/范围线/控规单元范围面', false);
  }

  addPanel(panel: any) {
    // HomeModule.addPanel(panel);
  }

  deleteProjectPanel() {}

  mainView() {}

  @Watch("realF11FullScreen")
  onChange() {
    let fullScreen = this.toolbarList.find((val) => val.id === "29");
    if (fullScreen) {
      fullScreen.icon = this.realF11FullScreen ? "10" : "9";
      fullScreen.title = this.realF11FullScreen ? "全屏" : "退出全屏";
    }
  }
  private realF11FullScreen: any = false;
  //真正按f11的全屏
  clickRealF11FullScreen() {
    this.realF11FullScreen = !this.realF11FullScreen;
    if (this.realF11FullScreen) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }

  clearLayerNodes() {}

  async clearTempObjects() {}

  circleLook() {
    // this.workspaceTool.circleLook1();
  }

  async switchNight() {
    const getButtonStauts = this.changeToolActive(this.toolbarList, "夜景");
    if (getButtonStauts) {
      //   await BoomEngineAPI.instance.weather?.setDateTime(2021, 9, 29, 22, 0, 0);
    } else {
      //   await BoomEngineAPI.instance.weather?.setDateTime(2021, 9, 29, 9, 0, 0);
    }
  }

  changeToolActive(toolbarList: any, toolName: any) {
    for (let i = 0; i < toolbarList.length; i++) {
      const toolElement = toolbarList[i];
      if (toolElement.title && toolElement.title === toolName) {
        toolElement.active = !toolElement.active;
        return toolElement.active;
      }
      if (Array.isArray(toolElement.children)) {
        this.changeToolActive(toolElement.children, toolName);
      }
    }
  }

  changeToolTextById(toolbarList: any, Id: any) {
    for (let i = 0; i < toolbarList.length; i++) {
      const toolElement = toolbarList[i];
      if (toolElement.text && toolElement.id === Id) {
        toolElement.text = this.visualAngle;
      }
      if (Array.isArray(toolElement.children)) {
        this.changeToolActive(toolElement.children, Id);
      }
    }
  }

  lookAround() {
    // this.workspaceTool.lookAround();
  }
  async handleApiEvent(info: any) {
    // if (info.eventtype === "LeftMouseButtonClick" && MarsModule.mars) {
    //   //销毁事务
    //   const res: any = await MarsModule.mars?.workspace.acApi?.camera?.get();
    //   (MarsModule.mars.workspace.acApi as any).camera.set(
    //     info.MouseClickPoint[0],
    //     info.MouseClickPoint[1],
    //     info.MouseClickPoint[2] + 10, //相机高度+10
    //     res.pitch,
    //     res.yaw,
    //     1
    //   );
    //   //创建小人
    //   const time = setTimeout(() => {
    //     BoomEngineAPI.instance.settings?.setInteractiveMode(1);
    //     MarsModule.mars?.workspace.transManager?.transStop();
    //     clearTimeout(time);
    //   }, 1200);
    // }
  }
  async setInteractiveMode(mode: any) {
    // if (mode.data !== null && mode.data !== undefined) {
    //   if (mode.data === "飞行") {
    //     // GeneralSetting.canSelect = false;
    //     MarsSettingModule.setSelectObject([]);
    //     HomeModule.setStartSelect(false);
    //     this.clickFullScreen();
    //     HomeModule.setHidePanel(false);
    //     HomeModule.setViewMode("");
    //     HomeModule.setInteractiveMode("fly");
    //     BoomEngineAPI.instance.settings?.setInteractiveMode(0);
    //   } else if (mode.data === "人行") {
    //     if (MarsModule.mars) {
    //       //创建点击选取点
    //       const selectTrans = new TransSelect(MarsModule.mars.workspace);
    //       selectTrans.handleApiEvent = this.handleApiEvent;
    //       //创建事务
    //       MarsModule.mars.workspace.transManager?.transStart(selectTrans);
    //     }
    //     this.clickFullScreen();
    //     HomeModule.setViewMode("walk");
    //   } else if (mode.data === "无人机") {
    //     // GeneralSetting.canSelect = false;
    //     await BoomEngineAPI.instance.settings?.setInteractiveMode(0);
    //     // HomeModule.setActiveMenu(null);
    //     // HomeModule.setHidePanel(true);
    //     this.clickFullScreen();
    //     // const select = new TransSelect();
    //     // select.clickBornPlaceEvent = this.clicFlykBornPlaceEvent;
    //     // Workspace.instance.transManager?.transStart(select);
    //     HomeModule.setInteractiveMode("fly");
    //   } else if (mode.data === "拾取") {
    //     await BoomEngineAPI.instance.settings?.setInteractiveMode(0);
    //     // GeneralSetting.canSelect = true;
    //     // HomeModule.setStartSelect(true);
    //     HomeModule.setInteractiveMode("select");
    //   }
    //   //  else if (mode.data === '属性') {
    //   //   HomeModule.setInteractiveMode('property');
    //   // }
    // }
  }

  async clicRunkBornPlaceEvent(e: any) {
    // if (e.MouseClickPoint && e) {
    //   await BoomEngineAPI.instance.camera?.get((res: any) => {
    //     BoomEngineAPI.instance.camera?.set(
    //       e.MouseClickPoint[0],
    //       e.MouseClickPoint[1],
    //       e.MouseClickPoint[2] + 2,
    //       res.pitch,
    //       res.yaw
    //     );
    //   });
    //   await setTimeout(async () => {
    //     await BoomEngineAPI.instance.settings?.setInteractiveMode(1);
    //     await BoomEngineAPI.instance.settings?.setMainUIVisibility(false);
    //   }, 2500);
    // }
  }

  async clicFlykBornPlaceEvent(e: any) {
    // if (e.MouseClickPoint && e) {
    //   await BoomEngineAPI.instance.camera?.get((res: any) => {
    //     BoomEngineAPI.instance.camera?.set(
    //       e.MouseClickPoint[0],
    //       e.MouseClickPoint[1],
    //       e.MouseClickPoint[2] + 30,
    //       res.pitch,
    //       res.yaw
    //     );
    //   });
    //   await setTimeout(() => {
    //     BoomEngineAPI.instance.settings?.setInteractiveMode(2);
    //   }, 2100);
    // }
  }
  private temporaryData: any = null;
  clickFullScreen() {
    // HomeModule.setFullScreen(!this.realFullScreen);
    // if (this.realFullScreen) {
    //   this.temporaryData = HomeModule.activeMenu;
    //   HomeModule.setActiveMenu(null);
    //   HomeModule.setHidePanel(true);
    // } else {
    //   HomeModule.setActiveMenu(this.temporaryData);
    //   HomeModule.setHidePanel(false);
    // }
  }

  mounted() {
    // Workspace.instance.projectManager?.afterPrjActived.addListen(() => {
    //   BoomEngineAPI.instance.settings?.setFovX(this.visualAngle);
    // });
  }
}
</script>

<style scoped lang="scss">
.toolbar-left {
  margin-left: 10px;
  color: #fff;
  .item {
    pointer-events: auto;
    margin-top: 10px;
    position: relative;
    cursor: pointer;
    &:hover {
      .img-box {
        background: linear-gradient(
          90deg,
          #2192b8 0%,
          rgba(33, 146, 184, 0.5) 50%,
          #2192b8 100%
        );
      }
      .content {
        max-width: 330px;
        border: 1px solid rgba($color: #fff, $alpha: 0.3);
      }
    }
    .img-box {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      position: relative;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid #4c89b6;
      box-shadow: inset 0 0 10px 2px #4c89b6;
      border-radius: 20px;
      .icon-text {
        position: absolute;
        top: 8px;
        left: 48%;
        transform: translateX(-50%);
        z-index: 1;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .no-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      border-radius: 4px;
    }
    .content {
      max-width: 0;
      height: 40px;
      position: absolute;
      background-color: rgba($color: #082737, $alpha: 0.5);
      display: flex;
      align-items: center;
      top: 0;
      left: 0;
      padding-left: 40px;
      /*border-radius: 4px;*/
      z-index: 5;
      overflow: hidden;
      transition: all ease 0.7s;
      border-radius: 20px;
      .content-item {
        border-radius: 4px;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        /* height: 100%; */
        height: 30px;

        display: flex;
        align-items: center;
        padding: 0 10px;
        margin: 0 10px;
        &:hover {
          background: linear-gradient(
            90deg,
            #2192b8 0%,
            rgba(33, 146, 184, 0.5) 50%,
            #2192b8 100%
          );
        }
        img {
          margin-right: 5px;
        }
        &.active-child {
          background: linear-gradient(
            90deg,
            #2192b8 0%,
            rgba(33, 146, 184, 0.5) 50%,
            #2192b8 100%
          );
        }
        /* &:last-child {*/
        /*  margin-right: 20px;*/
        /*} */
      }
    }
  }
  .item.active {
    .img-box {
      background: linear-gradient(
        90deg,
        #2192b8 0%,
        rgba(33, 146, 184, 0.5) 50%,
        #2192b8 100%
      );
    }
  }
}
</style>
